<template>
  	<el-dialog class="modify-class equipment-dialog" width="1157px" title="详情" visible append-to-body :close-on-click-modal="false" :before-close="beforeClose">
		<div class="content">
			<div class="myform">
				<div class="item">
					<span class="key">设备代号：</span>
					<span class="val">{{equipmentDialogData.deviceCode}}</span>
				</div>
				<div class="item">
					<span class="key">设备名称：</span>
					<span class="val">{{equipmentDialogData.deviceName}}</span>
				</div>
				<div class="item">
					<span class="key">设计单位：</span>
					<span class="val">{{equipmentDialogData.designOrg}}</span>
				</div>
				<div class="item">
					<span class="key">生产单位：</span>
					<span class="val">{{equipmentDialogData.productionOrg}}</span>
				</div>
				<div class="item">
					<span class="key">齐套单位：</span>
					<span class="val">{{equipmentDialogData.matchOrg}}</span>
				</div>
				<div class="item">
					<span class="key">入库情况：</span>
					<span class="val">{{equipmentDialogData.instockCount}}/{{equipmentDialogData.deviceCount}}</span>
				</div>
				<div class="item">
					<span class="key">设备编号：</span>
					<span class="val">{{equipmentDialogData.deviceNo}}</span>
				</div>
				<div class="item">
					<span class="key">状态：</span>
					<span class="val" v-if="equipmentDialogData.stockStatus == 1">已出库</span>
					<span class="val" v-else-if="equipmentDialogData.stockStatus == 0">已入库</span>
					<span class="val" v-else></span>
				</div>
			</div>
			<div class="mytable">
				<div class="theader">
					<div>序号</div>
					<div>设备编号</div>
					<div>出库时间</div>
					<div>出库人</div>
					<div>去向</div>
				</div>
				<div class="tbodys">
					<div class="tbody" v-for="(item, index) in list" :key="item.id">
						<div>{{index+1}}</div>
						<div>{{item.deviceNo?item.deviceNo:'-'}}</div>
						<div>{{item.outstockTime}}</div>
						<div>{{item.outstockOperator}}</div>
						<div>{{item.outstockRemarks}}</div>
					</div>
				</div>
			</div>
		</div>
  	</el-dialog>
</template>

<script>
import warehouseApi from '@/apis/overview/warehouse.js'
export default {
  	props: {
    	modelId: {
      		type: Number,
      		default: ''
    	},
		equipmentDialogData: {
			type: Object,
			default: null
		}
  	},
  	data() {
	    return {
	      	list: []
	    }
  	},
	created() {
		console.log(this.equipmentDialogData)
		this.getDetailInfo()
	},
  	methods: {
		getDetailInfo() {
			let params = {
				modelId: this.modelId,
				deviceProgressId: this.equipmentDialogData.deviceProgressId
			}
			warehouseApi.getEquipmentDetails(params).then(({ data }) => {
				this.list = data
			})
		},
    	beforeClose() {
      		this.$emit("close")
    	}
  	}
}
</script>

<style lang="scss">
    .equipment-dialog {
		.el-dialog__body {
			padding: 0!important;
		}
    }
    .content {
        width: 100%;
        height: 465px;
        background-color: #FFF;
		box-sizing: border-box;
		padding: 49px 36px 0 37px;
		.myform {
			width: 100%;
			height: 130px;
			border: 1px solid #D0D6E3;
			border-radius: 3px;
			box-sizing: border-box;
			padding: 12px 24px;
			display: flex;
			flex-wrap: wrap;
			.item {
				width: 25%;
				display: flex;
				align-items: center;
				font-size: 18px;
				.key {
					display: inline-block;
					width: 100px;
					color: #505971;
				}
				.val {
					color: #161D2E;
				}
			}
		}
		.mytable {
			width: 100%;
			margin-top: 27px;
			.theader {
				width: 100%;
				height: 36px;
				background-color: #F4F5F8;
				border: 1px solid #D0D6E3;
				border-radius: 3px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				div {
					width: 25%;
					text-align: center;
				}
				div:first-child {
					width: 10%;
				}
				div:last-child {
					width: 40%;
				}
			}
			.tbodys {
				width: 100%;
				height: 173px;
				overflow-y: scroll;
			}
			.tbody {
				width: 100%;
				height: 41px;
				border: 1px solid #D0D6E3;
				border-radius: 3px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 3px;
				div {
					width: 25%;
					text-align: center;
				}
				div:first-child {
					width: 10%;
				}
				div:last-child {
					width: 40%;
				}
			}
		}
    }
    
</style>
